/**
 * 使用canvas获取图片平均色
 * @param imgs 
 * @param callback 
 */

export function canvasImgColor(imgs:any, callback:any) {
    var imgSrc = imgs
    var upload:any = document.getElementById('uploadImg')
    const imgEle = document.createElement('img')
    const canvas = document.createElement('canvas')
    imgEle.src = imgSrc
    imgEle.crossOrigin = '';
    imgEle.onload = () => {
        var ctx:any = canvas.getContext("2d");
        var naturalImgSize = [imgEle.naturalWidth, imgEle.naturalHeight];
        canvas.width = naturalImgSize[0];
        canvas.height = naturalImgSize[1];

        //绘制到canvas
        ctx.drawImage(imgEle, 0, 0);
        //获取imageData：rgba像素点
        var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const leftSectionData:any = []
        const rightSectionData:any = []
        const oneLineImgDataLen = canvas.width * 4;

        imgData.data.forEach((colorVal:any, i:any) => {
            if (i % oneLineImgDataLen <= 0.5 * oneLineImgDataLen || i % oneLineImgDataLen >= 0.6 * oneLineImgDataLen) {
                const inLeft = i % oneLineImgDataLen <= 0.5 * oneLineImgDataLen
                if (i % 4 === 0) {
                    // 获取rgb均值
                    const curAverageRGB = (imgData.data[i] + imgData.data[i + 1] + imgData.data[i + 2]) / 3;
                    let leftOrRightRef = inLeft ? leftSectionData : rightSectionData;
                    //每个数组里存四个值：本颜色值中的r、g、b的均值，以及r、g、b三个值。
                    //均值一方面用于累加计算本区域的整体均值，然后再跟每个均值对比拿到与整体均值最接近的项的索引，再取该数组里的后三个值：rgb，对应着颜色
                    leftOrRightRef[leftOrRightRef.length] = [curAverageRGB, imgData.data[i], imgData.data[i + 1], imgData.data[i + 2]]
                }
            }
        })
        //generate average rgb
        const averageOfLeft = Math.round(leftSectionData.reduce((_cur:any, item:any) => {
            return _cur + item[0]
        }, 0) / leftSectionData.length)
        const averageOfRight = Math.round(rightSectionData.reduce((_cur:any, item:any) => {
            return _cur + item[0]
        }, 0) / rightSectionData.length)
        //find the most near color
        const findNearestIndex = (averageVal:any, arrBox:any) => {
            let _gapValue = Math.abs(averageVal - arrBox[0])
            let _nearColorIndex = 0
            arrBox.forEach((item:any, index:any) => {
                const curGapValue = Math.abs(item - averageVal)
                if (curGapValue < _gapValue) {
                    _gapValue = curGapValue
                    _nearColorIndex = index
                }
            })
            return _nearColorIndex
        }
        const leftNearestColor = leftSectionData[findNearestIndex(averageOfLeft, leftSectionData)]
        const rightNearestColor = rightSectionData[findNearestIndex(averageOfRight, rightSectionData)]
        upload.style.backgroundColor = `rgba(${leftNearestColor[1]},${leftNearestColor[2]},${leftNearestColor[3]},1) 0%,rgba(${rightNearestColor[1]},${rightNearestColor[2]},${rightNearestColor[3]},1)`
        callback(upload.style.backgroundColor)
    }
}
